<template>
    <div :class="`detail-action-bar ${mode} ${styleMode}`">
        <div class="action-icon" @click="gotoIndex">
            <MiniIcon name="home" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" />
        </div>
        <div class="action-icon" @click="openShopBag">
            <MiniIcon name="bagnumber" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" />
            <div v-if="bagProductLength > 0" class="bag-tip">{{bagProductLength}}</div>
        </div>
        <div :class="`btn-container ${isDisable ? 'is-disable' : ''}`" :style="themeBackround">
            <div class="action-btn" :style="themeBackround" @click="addBag">加入购物车</div>
            <div class="line"></div>
            <div class="action-btn" :style="themeBackround" @click="bagNow">立即购买</div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import { redirectTo } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'ActionBar', // 操作区
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        isDisable: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState({
            bagProductLength: state => state.shopBag.bagProductLength,
        }),
    },
    methods: {
        gotoIndex() {
            redirectTo('shop');
        },
        openShopBag() {
            redirectTo('shop/bag');
        },
        bagNow() {
            if (this.$props.isDisable) return;
            this.$emit('buyNow');
        },
        addBag() {
            if (this.$props.isDisable) return;
            this.$emit('addBag');
        },
    },
};
</script>

<style lang="less">
.detail-action-bar {
    box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.03);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: @white;
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom);
    .flex();
    align-items: center;
    .p-h(@shop-gap-md);
    .mode-white();
    z-index: 11;
    .action-icon {
        height: 100%;
        .flex-column-center();
        .m-r(@shop-gap-md);
        position: relative;
        .bag-tip {
            position: absolute;
            min-width: 8px;
            height: 14px;
            border-radius: 10px;
            font-size: 10px;
            color: @white;
            .t-c();
            .p-h(3);
            line-height: 14px;
            background-color: #FE3B30;
            right: -10px;
            top: 10px;
        }
    }
    .btn-container {
        flex: 1;
        .flex();
        height: 44px;
        border-radius: 44px;
        overflow: hidden;
        .p-h(@gap);
        align-items: center;
        &.is-disable {
            opacity: .3;
        }
        .action-btn {
            border: none;
            height: 100%;
            flex: 1;
            color: @white;
            .flex-row-center();
            font-weight: 500;
            font-size: @font-size;
        }
        .line {
            height: 18px;
            width: 1px;
            background-color: @white;
        }
    }
}
</style>
